<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<style type="text/css">
			.mui-table-view li.mui-table-view-cell {
				height: 100px;
				padding: 0;
			}
			
			.mui-table-view li.mui-table-view-cell>a:not(.mui-btn) {
				margin: 0;
				padding: 10px;
				height: 100px;
				width: 100%;
				white-space: normal;
				position: absolute;
			}
			
			.opusImg {
				position: relative;
				overflow: auto;
				display: inline-block;
				max-width: 120px;
				border-radius: 4px;
			}
			
			.opusImg img {
				width: 100%;
				height: 100%;
			}
			
			.opusImg .opusInfoBar {
				font-size: 10px;
				position: absolute;
				bottom: 0;
				height: 14px;
				line-height: 18px;
				padding: 0 4px;
				width: 100%;
				background-color: rgba(0, 0, 0, .4);
				color: #efeff4;
			}
			
			.opusImg .type {
				position: absolute;
				top: 0;
				border-radius: 0 0 0 4px;
				right: 0;
				background-color: rgba(0, 0, 0, .4);
				color: #FFFFFF;
				height: 16px;
				padding: 2px 4px;
				line-height: 16px;
				font-size: 10px;
			}
			
			.opusInfoBar .praiseNum {
				float: right;
			}
			
			.opusInfoBar .playNum i.iconfont,
			.opusInfoBar .praiseNum i.iconfont {
				font-size: 10px;
			}
			
			.mui-table-view .mui-media-object {
				height: 80px;
				max-width: 120px;
				overflow: hidden;
			}
			
			.mui-table-view-cell .opustitle {
				color: #000000;
				font-size: 16px;
				margin-bottom: 4px;
			}
			
			.mui-table-view-cell .opustitle .releaseTime {
				font-size: 12px;
				float: right;
			}
			
			.mui-table-view-cell p.mui-ellipsis-2 {
				font-size: 12px;
				line-height: 14px;
				color: #333333;
				margin-bottom: 4px;
				width: 95%;
				height: 28px;
			}
			
			.mui-media-body p.opusTag {
				font-size: 12px;
				margin: 0 5px;
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">小样&amp;作品</h1>
			<a class="mui-pull-right" id="add-production">发布作品</a>
		</header>
		
		<div class="mui-content">
			<div id="production-list">
				<ul class="mui-table-view" id="productionlist">
					<!--<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<div class="opusImg mui-media-object mui-pull-left">
								<img src="../images/shuijiao.jpg" />
								<div class="opusInfoBar">
									<span class="playNum"><i class="iconfont">&#xe690;</i> : 40</span>
									<span class="praiseNum"><i class="iconfont">&#xe6b5;</i> : 77</span>
								</div>
								<span class="type">作品</span>
							</div>
							<div class="mui-media-body">
								<p class="opustitle">我从哪里来<i class="iconfont fileType">&#xe612;</i><span class="releaseTime mui-pull-right">12-06</span></p>
								<p class="mui-ellipsis-2">一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌</p>
								<p class="opusTag"><span>民歌 | 慢歌</span></p>
							</div>
						</a>
					</li>-->
				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var productionList = document.getElementById("productionlist");
			var lazyLoad = mui(productionList).imageLazyload({
				placeholder: '../images/shuijiao.jpg',
				autoDestroy: false
			});
			mui.plusReady(function() {
				getData();
				mui('header').on('tap', '.mui-pull-right', function() {
					Common.openWindow('release-production.html');
				});
				
				mui('ul').on('tap','.mui-table-view-cell', function() {
					plus.nativeUI.showWaiting();
					Common.openWindow('my-production-detail.html',{
						mypid : this.id,
						src : this.src
					});
				});
			})
			document.addEventListener('reload', function() {
				getData();
			})
			
			function getData() {
				var url = baseURL + 'myOpus/getSelfOpusList/23.json';
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.state) {
						var data = data.result;
						if(data.length) {
							productionList.innerHTML = '';
							for (var i = 0; i < data.length; i++) {
								createOpusList(data[i].oid, data[i].name, data[i].homepic, data[i].description, 
									data[i].kind, data[i].label, data[i].playNum, data[i].praiseNum,  data[i].type, data[i].releaseTime);
							}
							lazyLoad.refresh(true);
						} else {
							Common.showState(productionList, '&#xe608;', '你还没有上传过作品', 50);
						}
					}
				}, function(xhr) {
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			}
			
			/**
			 * 小样列表
			 * @param {Object} id			作品id
			 * @param {Object} name			作品名称
			 * @param {Object} src			预览图片路径
			 * @param {Object} description	描述
			 * @param {Object} kind			类别
			 * @param {Object} label		标签
			 * @param {Object} playNum		播放次数
			 * @param {Object} praiseNum	好评数量
			 * @param {Object} type			类型（小样 | 作品）
			 * @param {Object} releaseTime	发布时间
			 */
			function createOpusList(id, name, src, description, kind, label, playNum, praiseNum, type, releaseTime) {
				var item = document.createElement('li');
				item.className = 'mui-table-view-cell mui-media';
				item.id = id;
				item.src = src;
				var str = '<a href="javascript:;"><div class="opusImg mui-media-object mui-pull-left">';
				str += '<img data-lazyload="' + src + '" /><div class="opusInfoBar"><span class="playNum">';
				str += '<i class="iconfont">&#xe690;</i> : ' + playNum + '</span><span class="praiseNum">';
				str += '<i class="iconfont">&#xe6b5;</i> : ' + praiseNum + '</span></div><span class="type">';
				str += (type.charAt(0) == 1 ? '小样' : '作品') + '</span></div><div class="mui-media-body"><p class="opustitle">';
				str += '<span class="mui-ellipsis">' + name + '</span>';
				str += '</p><p class="mui-ellipsis-2">' + description + '</p><p class="opusTag"><span>';
				str += label + ' | ' + kind + '</span><span class="releaseTime mui-pull-right">' + releaseTime + '</span></p></div></a>';
				item.innerHTML = str;
				productionList.appendChild(item);
			}
		</script>
	</body>

</html>